<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'
import { LoginTemplate04  } from './components/LoginTemplate'
import { SocialLoginForm } from './components/LoginForm'
import { ChangeIllustrationsType } from './components/Illustrations'
/**
 * 社交账号登录
 * 此页面是跳转社交账号进行授权后，返回的登录页
 */
const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
// const { t } = useI18n() // 国际化
</script>

<template>
  <div class="login-page">
    <div class="header">
      <div class="left">
        <Logo />
      </div>
      <div class="right">
        <!-- 切换登录模板4的插画类型 -->
        <ChangeIllustrationsType />
        <!-- 国际化 -->
        <LocaleDropdown v-if="systemConfig.isGlobalizationEnable" />
        <!-- 明暗皮肤切换 -->
        <ThemeSwitch />
      </div>
    </div>
    <el-scrollbar>
      <LoginTemplate04>
        <!-- 社交账号登录 -->
        <SocialLoginForm class="m-auto h-auto p-20px lt-xl:rounded-3xl" />
      </LoginTemplate04>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.login-page {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    width: 100%;
    align-items: center;
    padding: var(--el-space);

    .left {
      flex: 1;
    }

    .right {

      :deep(.#{$namespace}-globalization) {
        position: relative;
        display: flex;
        height: 32px;
        padding: 0 10px;
        color: var(--el-color-primary);
        cursor: pointer;
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 4px;
        align-items: center;
        justify-content: space-around;
      }

      :deep(.#{$namespace}-skin) {
        margin-left: 12px;
      }
    }
  }
}
</style>
<style lang="scss">
.login-template {

  .el-dropdown-menu__item {
    &.is-active {
      color: var(--el-color-primary);
    }
  }
}
</style>
